



var App = React.createClass({
    getInitialState: function () {
        return {
            page: 1,
            article: [],//文章列表
        };
    },
    componentDidMount: function () {//组件被加载之后，默认加载第一页数据
        this.getData(1);
    },
    onRefresh: function () {//下拉刷新函数
        this.setState({ page: 1 });
        this.getData(this.state.page);
    },
    onLoadMore: function () {//加载更多函数
        var page = this.state.page + 1;
        console.log(page)
        this.setState({ page: page });
        this.getData(page);
    },
    getItem: function (article) {
        return <Item article={article} />;
    },
    getData: function (page) {//获取数据的函数
        var self = this;
        $.ajax({
            url: "http://wangyi.butterfly.mopaasapp.com/news/api?type=travel & page=" + page + "& limit=5",
            type: 'GET',
            success: function (data) {
                // 4.对data进行处理，并进行对应的dom渲染
                if (page == 1) {//如果是第一页，直接覆盖之前的数据
                    self.setState({ article: data.list })
                    //父组件的setState  改变的自己的状态的同时触发了自组件
                    // 子组件可以在componentWillReceiveProps里接受新的参数，改变自己的state会自动触发render渲染
                } else {
                    self.setState({//否则累加数组
                        article: self.state.article.concat(data.list)
                    })
                }
            },
            error: function () {
                // 4.错误处理
            }
        })
    },
    render: function () {
        return (
            <ListView
                onRefresh={this.onRefresh}  //从外面传进去的下拉刷新回调函数
                onLoadMore={this.onLoadMore}//从外面传进去的加载更过回调函数
                article={this.state.article}//从外面传进去的文章列表数据数组
                getItem={this.getItem} //从外面传进去的获取列表子项的回调函数
            />
        );
    }
});

